import React, { ReactNode, MouseEvent } from 'react'
import catImg from '../assets/cat.jpg'

function Cat(props: any) {
    const mouse = props.mouse
    return (
        <img src={catImg} style={{ position: 'absolute', left: mouse.x, top: mouse.y, width: '50px', height: '50px' }} alt="cat" />
    )
}

class Mouse extends React.Component<{
    render: (mouse: any) => ReactNode
}, any> {
    state = { x: 0, y: 0 }
    handleMove = (event: MouseEvent) => {
        this.setState({
            x: event.clientX,
            y: event.clientY
        })
    }
    render() {
        return (
            <div style={{ height: '100vh' }} onMouseMove={this.handleMove} >
                {this.props.render(this.state)}
            </div>
        )
    }
}

class MouseTracker extends React.Component {
    render() {
        return (
            <div>
                <h1>移动鼠标</h1>
                <Mouse render={(mouse) =>
                    <Cat mouse={mouse} />
                } />
            </div>
        )
    }
}

export default MouseTracker